import { Dropdown } from 'antd'
import { DownOutlined } from '@ant-design/icons';
import './MegaMenu.css'

export default function MegaMenu({ menus, onMenuClick }) {
  return (
    <div className="mega-menu-bar">
      {menus.mDownOutlinedap(menu => (
        <Dropdown
          key={menu.key}
          overlay={
            <div className="mega-dropdown">
              {menu.groups.map(group => (
                <div className="mega-group" key={group.title}>
                  <div className="mega-group-title">{group.title}</div>
                  {group.items.map(item => (
                    <div
                      className="mega-item"
                      key={item.key}
                      onClick={() => onMenuClick(item)}
                    >
                      {item.label}
                    </div>
                  ))}
                </div>
              ))}
            </div>
          }
          trigger={['hover']}
          placement="bottom"
          overlayClassName="mega-overlay"
        >
          <span className="mega-top-item">{menu.label}<DownOutlined /></span>
        </Dropdown>
      ))}
    </div>
  )
}
